<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
</head>

<!-- 5-9的总结 -->

<!-- 
    Vue监视数据的原理:
1，vue会监视data中所有层次的数据
2，如何监测对象中的数据?
通过setter实现监视，且要在new Vue时就传入要监测的数据
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue.set(target，propertyName/index，value) 
或vm.$set(target，propertyName/index， value)
3，如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4。在Vue修改数组中的某个元素一定要用如下方法:
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或 vm,$set() -->

<body>
    <div id="root">
        <h1>学生信息    </h1>

        <button @click="student.age++">年龄+1</button>
        <button @click="addSex">添加性别属性 默认值:男</button>
        <button @click="student.sex= '未知'">修改性别属性 默认值:未知</button>

        <button @click="addFriend">首部添加一个朋友</button>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为开车</button>
        <button @click="removeSmoke">移除抽烟爱好</button>

        <h1>姓名 {{student.name}}</h1>
        <h1>年龄 {{student.age}}</h1>
        <h1 v-if="student.sex">性别 {{student.sex}}</h1>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}} -- {{f.age}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;
     const vm =new Vue({
        el:"#root",
        data(){ 
            return{
               
                
                student:{
                    name:"tom",
                    age:18,
                hobby:['抽烟','喝酒'],   //vm.$set(vm.student.hobby,1,'泡妞')  //Veu.set()
                friends:[
                {
                    name:"joy",
                    age:35
                },
                {
                    name:"LJJ",
                    age:34
                }
                ]
                }
            }
        },
                methods :{
                    addSex(){
                        // Vue.set(this.student,'sex','男')
                        this.$set(this.student,'sex','男')

                    },
                    addFriend(){
                        this.student.friends.unshift({name:'尼玛',age:80})
                    },
                    updateFirstFriendName(){
                        this.student.friends[0].name='张三'
                        this.student.friends[0].age=44
                    },
                    addHobby(){
                        this.student.hobby.push('学习')
                    },
                    updateHobby(){
                        //可以用7个方法之一
                        this.student.hobby.splice(0,1,'kaiche')
                        //也可以用set方法 Vue.set 或者vm.$set
                        // this.$set(this.student.hobby,0,'开车')
                    },
                    removeSmoke(){  //针对对数组不改变的，直接改变原数组this.student.hobby
                        this.student.hobby=this.student.hobby.filter((h)=>{
                            return h!=='喝酒'
                        })
                    }
                }
    })
</script>
</html>